<template>
  <div class="menu-content">
    <div class="name">天奇工装</div>
    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
      <el-menu-item index="/index">首页</el-menu-item>
      <el-menu-item index="/about">关于天奇</el-menu-item>
      <el-menu-item index="/solution">解决方案</el-menu-item>
      <el-menu-item index="/productions">主要产品</el-menu-item>
      <el-menu-item index="/news">新闻资讯</el-menu-item>
      <el-menu-item index="/contact">联系我们</el-menu-item>
      <el-menu-item index="/recuiltment">人才招聘</el-menu-item>
    </el-menu>
  </div>

</template>

<script lang="ts" setup>
import { ref, onMounted, nextTick } from 'vue'
import { useRoute, useRouter } from 'vue-router'

import { useGlobalStore } from '@/stores/global'

let store = useGlobalStore()

const activeIndex = ref('')

const router = useRouter()

const handleSelect = (key: string, keyPath: string[]) => {
  // console.log(key, keyPath)
  store.path = key
  sessionStorage.setItem('path', key)
  activeIndex.value = store.path
  router.push(key)
}

onMounted(() => {
  store.path = sessionStorage.getItem('path') || '/index'
  activeIndex.value = store.path
})
</script>

<style lang="scss" scoped>
.menu-content {
  width: 100%;
  height: 100px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 18%;

  .name {
    color: #000000;
    width: 20%;
    font-size: 36px;
    font-weight: bold;
    white-space: nowrap;
  }

  .el-menu {
    width: 80%;
    justify-content: space-between;
    box-sizing: border-box;
    border-bottom: 0;

    .el-menu-item {
      font-size: 18px !important;
      background-color: rgba($color: #000000, $alpha: 0);


      &:hover {
        color: red !important;
        background-color: rgba($color: #000000, $alpha: 0);
      }
    }

    .is-active {
      color: red !important;
      border-bottom-color: red;
      background-color: rgba($color: #000000, $alpha: 0);
    }
  }

  @media (max-width : 1200px) {
    .name {
      display: none;
    }
  }
}
</style>